<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>work1</title>
    <script type="text/javascript" src="../js/vue.js"></script>
    <style>
        .div1{
            justify-content: center;
            padding-left:90px;
            padding-top:35px;
        }
        .mydiv{
            float: left;
            margin: 10px;
        }
        .btn{
            background-color: green;
            color: white;
            margin-left: 60px;
        }
    </style>

</head>
<body>
    <div id="app" class="div1">
        <div>
            <div class="mydiv" v-for="course in courses">
                <div>
                    <img :src="course.img" width="270px" height="150px">
                </div>
                <div>
                    <div>
                        <h5>{{course.name}}</h5>
                    </div>
                    <div>
                        <span>1234人学习|1234评论</span>
                        <button class="btn">免费</button>
                    </div>
                </div>

            </div>
        </div>
    </div>
</body>
</html>
<script>
    var vm=new Vue({
        el:'#app',
        data:{
            courses:[
                {name:"java基础1",img:"../images/model1.png"},
                {name:"java基础2",img:"../images/model6.jpg"},
                {name:"java基础3",img:"../images/model3.png"},
                {name:"java基础4",img:"../images/model4.jpg"},
                {name:"java基础5",img:"../images/model5.jpg"},
                {name:"java基础6",img:"../images/model6.jpg"},
                {name:"java基础7",img:"../images/model5.jpg"},
                {name:"java基础8",img:"../images/model2.jpg"}
            ]
        }
    });
</script>